import React, { useState, useEffect } from 'react'
import './css/upguan.scss'
import IconFont from './Tubiao';
import { useNavigate, useLocation } from 'react-router-dom';
import { Sticky, Picker, Button, Input, Toast, Form } from 'react-vant';
import { InfiniteScroll } from 'antd-mobile'
import axios from './Axios';
export default function Upguan() {

    const location = useLocation()
    console.log(location.state.item);
    const navigate = useNavigate()
    const [name,setname] = useState(location.state.item.name)
    const [type,settype] = useState(location.state.item.type)
    const [sno,setsno] = useState(location.state.item.sno)

    const [form] = Form.useForm()

    const onFinish = values => {
        console.log(values)
    }
    useEffect(() => {
        setname(location.state.item.name)
        settype(location.state.item.type)
        setsno(location.state.item.sno)
    }, [])

    const upd = async() => {
        let obj = {
            id: location.state.item._id,
            name: name,
            type: type,
            sno: sno
        }
        let {data} = await axios.post('/upguan',obj)
        if(data.code === 200){
            Toast.success('修改成功')
            navigate('/guanyan')
        }
    }
    return (
        <div className='div'>
            <Sticky>
                <div className='top'>
                    <span className='icon' onClick={() => (navigate('/guanyan'))}>
                        <IconFont name='icon-arrowLeft'></IconFont>
                    </span>
                    <span>编辑观演人信息</span>
                </div>
            </Sticky>
            <Form
                onFinish={onFinish}
            >
                <Form.Item
                    name='text1'
                    label='姓名'
                >
                    <Input placeholder='请输入姓名' defaultValue={name} onChange={name => setname( name )} />
                    {/* <input type='text'  value={name}  onChange={name => setname( name )}/> */}
                </Form.Item>
                <Form.Item
                    isLink
                    name='picker'
                    label='证件类型'
                    trigger='onConfirm'
                    onClick={(_, action) => {
                        action.current?.open()
                    }}
                >
                    <Picker 
                    onChange={(val)=>{settype(val)}}
                        popup
                        defaultValue={type}
                        columns={[
                            '身份证',
                            '港澳通行证',
                            '台湾通行证',
                            '护照'
                        ]}
                    >
                        {val => val || '请选择您的证件类型'}
                    </Picker>
                </Form.Item>
                <Form.Item
                    label='证件号码'
                    name='text3'
                >
                    <Input placeholder='请输入您的证件号码' defaultValue={sno} onChange={sno => setsno( sno )} />
                </Form.Item>
            </Form>
            <div className='ddd'>
                <Sticky>
                    <span onClick={upd}>保存</span>
                </Sticky>
            </div>
        </div>
    )
}
